<script lang="ts" setup>
import { getBusinessPremisesApi } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'

const list = ref()
const query = defineProps<{
  couponId: string
}>()
console.log(query.couponId)

onLoad(() => {
  getBusinessPremises()
})
/** 获取优惠券的营业点 */
const getBusinessPremises = async () => {
  const res = await getBusinessPremisesApi({ couponId: query.couponId })
  console.log(res)
  list.value = res.data || []
}
</script>

<template>
  <view class="availablePoint-box">
    <view class="isAvailablePoint">{{ list?.length > 0 ? '可使用营业点' : '无使用营业点' }}</view>
    <uni-collapse>
      <uni-collapse-item
        :title="`${item?.cityName}(${item.childs?.length})`"
        v-for="item in list"
        :key="item.areaId"
        :show-animation="true"
        :accordion="true"
      >
        <view class="machineNameItem" v-for="ev in item.childs" :key="ev.machineId">{{
          `${ev.machineName}-取餐机-${ev.machineId}`
        }}</view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<style lang="scss">
.availablePoint-box {
  width: 100%;
  min-height: 100%;
  background: #f5f5f5;

  .isAvailablePoint {
    height: 96rpx;
    line-height: 96rpx;
    padding-left: 30rpx;
    font-size: 24rpx;
    color: #666;
  }
  .machineNameItem {
    height: 96rpx;
    line-height: 96rpx;
    background: #fff;
    padding-left: 30rpx;
    color: #666;
  }
}
</style>
